<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客管理</title>
    <div th:replace="admin/_fragments-admin::basicrefrence"></div>
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <nav th:replace="admin/_fragments-admin::nav"></nav>
    <div th:replace="admin/_fragments-admin::Seconednav"></div>


    <div class="m-tenDistance">
        <div class="ui animated container">
            <div class="ui segment">
                <form class="ui form segment">
                    <div class="inline fields">

                        <div class="field">
                            <input type="text" id="search" name="search" placeholder="标题"/>
                        </div>

                        <div class="field">
                            <div class="ui selection dropdown">
                                <input type="hidden" id="typeId" />
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <div class="menu" id="typeMenu">

                                </div>
                            </div>
                        </div>

                        <div class="field">
                            <button onclick="buttonClick(0)" type="button" class="ui mini teal basic button"><i class="search icon"></i> </button>
                        </div>


                    </div>
                </form>

                <table border="1px"  class="ui center aligned table">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>标题</th>
                            <th>类型</th>
                            <th>标签</th>
                            <th>发布时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="blogTable"></tbody>
                    <tfoot>
                        <tr>
                            <th colspan="7">
                                <div class="ui left floated pagination menu">
                                    <a href="/admin/publish" class="item">新增</a>
                                </div>

                                <div class="ui right floated pagination menu">
                                    <button onclick="buttonClick(1)" class="ui mini basic button">上一页</button>
                                    <button onclick="buttonClick(2)" class="ui mini basic button">下一页</button>
                                </div>
                            </th>
                        </tr>
                    </tfoot>
                    <tfoot></tfoot>
                </table>

            </div>
        </div>
    </div>


    <footer th:replace="admin/_fragments-admin::footer"></footer>


</body>

<script type="text/javascript">

    var currentPage = 1;

    var searchInput = $("#search");
    var blogTable = $("#blogTable");

    function flushBlogTable(blogList) {
        blogTable.empty();
        for(let blog of blogList) {
            let blogCreateDate = new Date(blog.createDate);
            let blogUpdateDate = new Date(blog.updateDate);
            let addElement = "<tr height=\"50px\">\n" +
                "                            <th>"+blog.id+"</th>\n" +
                "                            <th>"+blog.title+"</th>\n" +
                "                            <th>"+blog.types.name+"</th>\n" +
                "                            <th>"+(blog.tag==1?'原创':'搬运')+"</th>\n" +
                "                            <th>"+
                blogCreateDate.getFullYear() + "-" + (blogCreateDate.getMonth()+1) + "-" + blogCreateDate.getDate()
                +"</th>\n" +
                "                            <th>"+
                blogUpdateDate.getFullYear() + "-" + (blogUpdateDate.getMonth()+1) + "-" + blogUpdateDate.getDate()
                +"</th>\n" +
                "                            <th>\n" +
                "                                <a href='/admin/blogModify?id="+blog.id+"' class='ui mini teal basic button'>修改</a>\n" +
                "                                <button onclick='deleteBlog("+ blog.id +")' class='ui mini red basic button delBtn'>删除</button>\n" +
                "                            </th>\n" +
                "                        </tr>";
            blogTable.append(addElement);
        }
    }


    function deleteBlog (id) {
        if(confirm("是否确定删除该博客")){
            $.ajax({
                url:"/admin/blogDelete",
                data:{
                    id:id,
                    page: currentPage,
                    search:searchInput.val(),
                    typeId:$('#typeId').val()
                },
                success:function (resp) {
                    if (resp.code === 0) {
                        alert("删除失败" + resp.msg);
                        return;
                    }
                    currentPage = resp.data.page;
                    flushBlogTable(resp.data.blogList);
                }
            })
        }
    }

    function listBlogByTypeInPage(next,search,typeId) {
        $.ajax({
            url:"/admin/listBlogInPageByType",
            data:{
                page:currentPage,
                next:next,
                search:search,
                typeId:typeId
            },
            success:function (resp) {
                if (resp.code === 0) {
                    return;
                }
                currentPage = resp.data.page;
                flushBlogTable(resp.data.blogList);
            }
        });
    }

    listBlogByTypeInPage(0,null,null);

    function buttonClick(next) {
        var search =  $('#search').val();
        var typeId = $('#typeId').val();
        listBlogByTypeInPage(next,search,typeId);
    }

    $.ajax({
        url:"/listAllType",
        success:function (resp) {
            if (resp.code === 0) {
                return;
            }
            for(let type of resp.data){
                $('#typeMenu')
                    .append("<div class=\"item\" data-value=\""+type.id+"\">"+type.name+"</div>");
                $('.ui.dropdown').dropdown();
            }
        }
    });


</script>

</html>